<template>
  <div class="app-container">
    <div class="filter-box">
      <el-button type="primary" size="small" @click="handleAdd">新增菜单</el-button>
    </div>
    <!-- 数据列表 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%;"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="title" label="名称" width="180px" align="center" />
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.status === 1 ? 'success' : 'danger'"
          >{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="图标" align="center" />
      <el-table-column prop="route_name" label="路由名称" align="center" />
      <el-table-column prop="route_path" label="路由地址" align="center" />
      <el-table-column prop="component_path" label="组件地址" align="center" />
      <el-table-column prop="sort" label="排序" align="center" />
      <el-table-column prop="created_at" label="创建时间" align="center" />
      <el-table-column prop="updated_at" label="修改时间" align="center" />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getTableData"
    />

    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="type" :visible.sync="dialogFormVisible" width="600px">
      <el-form ref="menuForm" :model="menuForm" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <el-cascader
                v-model="menuForm.parentId"
                :props="{ value: 'id', label: 'title', checkStrictly: true, emitPath: false }"
                :options="menuOptions"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单标题" prop="title">
              <el-input v-model="menuForm.title" placeholder="请输入菜单标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="sort">
              <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="菜单图标">
              <el-popover
                placement="bottom-start"
                width="460"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="menuForm.icon" placeholder="点击选择图标" readonly>
                  <svg-icon
                    v-if="menuForm.icon"
                    slot="prefix"
                    :icon-class="menuForm.icon"
                    class="el-input__icon"
                    style="height: 32px;width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="路由名称" prop="menuName">
              <el-input v-model="menuForm.routeName" placeholder="请输入路由名称" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="路由地址" prop="path">
              <el-input v-model="menuForm.routePath" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件路径" prop="component">
              <el-input v-model="menuForm.componentPath" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-col :span="24">
          <el-form-item label="菜单状态">
            <el-radio-group v-model="menuForm.status">
              <el-radio :key="1" :label="1">显示</el-radio>
              <el-radio :key="2" :label="2">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addMenu, delMenu, listMenu, updateMenu, getMenus } from '@/api/system/menu'
import IconSelect from '@/components/IconSelect'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination, IconSelect },
  data() {
    return {
      menuList: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      tableData: [],
      dialogFormVisible: false,
      type: '',
      menuForm: {
      },
      // 表单校验
      rules: {
        title: [
          { required: true, message: '菜单标题不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ]
      },
      menuOptions: [],
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      listMenu(this.listQuery).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    resetForm() {
      this.menuForm = {
        id: undefined,
        parentId: 0,
        title: undefined,
        icon: undefined,
        routeName: undefined,
        routePath: undefined,
        componentPath: undefined,
        sort: 0,
        status: 1
      }
    },
    async handleAdd() {
      this.type = '新增菜单'
      this.resetForm()
      const { data } = await getMenus()
      this.menuOptions = data
      this.dialogFormVisible = true
    },
    async handleEdit(index, row) {
      this.type = '修改菜单'
      this.resetForm()
      const { data } = await getMenus()
      this.menuOptions = data
      const { id, sort, title, icon, component_path, route_name, route_path, status, parent_id } = row
      this.menuForm = {
        sort,
        title,
        icon,
        status,
        id,
        parentId: parent_id,
        routeName: route_name,
        routePath: route_path,
        componentPath: component_path
      }
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMenu(row.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getTableData()
        }).catch(e => {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleConfirm() {
      this.$refs.menuForm.validate(valid => {
        if (valid) {
          if (this.type === '新增菜单') {
            addMenu(this.menuForm).then(res => {
              this.$message({
                message: '新增成功!',
                type: 'success'
              })
              this.getTableData()
              this.dialogFormVisible = false
            }).catch(e => {
              this.$message({
                message: '新增失败!',
                type: 'error'
              })
              this.dialogFormVisible = false
            })
          } else {
            updateMenu(this.menuForm.id, this.menuForm).then(res => {
              this.$message({
                message: '修改成功!',
                type: 'success'
              })
              this.getTableData()
              this.dialogFormVisible = false
            }).catch(e => {
              this.$message({
                message: '修改失败!',
                type: 'error'
              })
              this.dialogFormVisible = false
            })
          }
        }
      })
    },
    // 选择图标
    selected(name) {
      this.menuForm.icon = name
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  .filter-box {
    margin-bottom: 20px;
    .filter-item {
      font-size: 14px;
      span {
        margin-right: 10px;
      }
    }
  }
}
</style>
